<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>html2Canvas demo</title>
    <script>
        document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
    </script>
    <style>
        body,
        html,
        div,
        p,
        ul,
        li,
        a,
        img,
        span,
        button,
        header,
        footer,
        section {
            padding: 0;
            margin: 0;
        }

        *, :before, :after {
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            outline: none;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        ::-webkit-scrollbar {
            width: 0;
            opacity: 0;
        }

        button{
            font-family: simsun,"microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
        }
        body {
            font-family: "microsoft yahei", arial, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
            color: #000;
            background-color: #f5f5f5;
            -webkit-overflow-scrolling: touch;
        }
        .share-container {
            padding-top: 0.72rem;
            width: 2.35rem;
            margin: 0 auto;
        }

        .share-content {
            padding-top: 0.72rem;
            height:3rem;
            background-color: blue;
            border-radius: 5px;
            width: 100%;
        }
        .text{
            font-size: 0.36rem;
            color: #f2f2f2;
        }
        .btn-share {
            width: 64%;
            height: 0.89rem;
            background-color: #3baaff;
            border-radius: 0.89rem;
            border: 1px solid #3baaff;
            color: white;
            font-size: 0.36rem;
            margin: 0.75rem 0 0.67rem;
        }
        .btn-share:active{
            background-color: #1b96c8;
        }
    </style>
</head>
<body>
<section class="main-container">
    <header class="share-container" id="shareContainer">
        <div class="share-content" id="shareContent">
              <div class="text">
                  <p>文字，图片等内容</p>
              </div>
        </div>
    </header>
    <footer class="footer-center">
        <button class="btn-share" id="btnShare">截&nbsp;图</button>
    </footer>
</section>

<script src="static/js/html2canvas.js"></script>
<script>

    //定义查找元素方法
    function $(selector) {
        return document.querySelector(selector);
    }
    var main = {
        init:function(){
            main.setListener();
        },
        //设置监听事件
        setListener:function(){
            var btnShare = document.getElementById("btnShare");
            btnShare.onclick = function(){
                main.html2Canvas();
            }
        },
        //获取像素密度
        getPixelRatio:function(context){
            var backingStore = context.backingStorePixelRatio ||
                    context.webkitBackingStorePixelRatio ||
                    context.mozBackingStorePixelRatio ||
                    context.msBackingStorePixelRatio ||
                    context.oBackingStorePixelRatio ||
                    context.backingStorePixelRatio || 1;
            return (window.devicePixelRatio || 1) / backingStore;
        },
        //绘制dom 元素，生成截图canvas
        html2Canvas: function () {
            var shareContent = $("#shareContent");// 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
            var width = shareContent.offsetWidth;  // 获取(原生）dom 宽度
            var height = shareContent.offsetHeight; // 获取(原生）dom 高
            var offsetTop = shareContent.offsetTop;  //元素距离顶部的偏移量

            var canvas = document.createElement('canvas');  //创建canvas 对象
            var context = canvas.getContext('2d');
            var scaleBy = main.getPixelRatio(context);  //获取像素密度的方法 (也可以采用自定义缩放比例)
            canvas.width = width * scaleBy;   //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
            canvas.height = (height + offsetTop) * scaleBy;  // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
            context.scale(scaleBy, scaleBy);

            var opts = {
                allowTaint:true,//允许加载跨域的图片
                tainttest:true, //检测每张图片都已经加载完成
                scale:scaleBy, // 添加的scale 参数
                canvas:canvas, //自定义 canvas
                logging: true, //日志开关，发布的时候记得改成false
                width:width, //dom 原始宽度
                height:height //dom 原始高度
            };
            html2canvas(shareContent, opts).then(function (canvas) {
               console.log("html2canvas");
                var body = document.getElementsByTagName("body");
                body[0].appendChild(canvas);
            });
        }
    };

    //最后运行代码
    main.init();

</script>
</body>
</html>